<template>
  <!-- 新增模板-选择映射字段 -->
  <section class="component relation-name">
    <div class="model">
      <div>
        <div class="circle"></div>
        <span class="circle-title">逾期信息</span>
      </div>
      <div class="select">
        <el-radio-group v-model="selectRelate">
          <el-radio class="radio-item" v-for="(item,index) in caseInfoList" :key="index" :label="item" :disabled="!!disStr(item)" v-bind:class="{requiredStr:item.flag===0}">{{item.cellName}}
            <el-tooltip effect="dark" content="字段示例：1970-01-01" placement="right-start" v-show="item.cellName==='逾期日期'||item.cellName==='进入催收日期'?true:false"><i class="el-icon-question"></i></el-tooltip>
            <el-tooltip effect="dark" content="字段示例：归C，结清" placement="right-start" v-show="item.cellName==='案件状态'?true:false"><i class="el-icon-question"></i></el-tooltip>
          </el-radio>
        </el-radio-group>
      </div>
      <div style="padding-top:10px">
        <div class="circle"></div>
        <span class="circle-title">合同信息</span>
      </div>
      <div class="select">
        <el-radio-group v-model="selectRelate">
          <el-radio class="radio-item" v-for="(item,index) in contractList" :key="index" :label="item" :disabled="!!disStr(item)" v-bind:class="{requiredStr:item.flag===0}">{{item.cellName}}
             <el-tooltip effect="dark" content="字段示例：1970-01-01" placement="right-start" v-show="item.cellName==='放款日期'?true:false"><i class="el-icon-question"></i></el-tooltip>
             <el-tooltip effect="dark" content="字段示例：数值" placement="right-start" v-show="item.cellName==='账单周期'?true:false"><i class="el-icon-question"></i></el-tooltip>
             <el-tooltip effect="dark" content="字段示例：1970-01-01" placement="right-start" v-show="item.cellName==='还款日'?true:false"><i class="el-icon-question"></i></el-tooltip>
             <!-- <el-tooltip effect="dark" content="字段示例：对公，代扣，微信，支付宝，其他" placement="right-start" v-show="item.cellName==='还款方式'?true:false"><i class="el-icon-question"></i></el-tooltip> -->
             <el-tooltip effect="dark" content="字段示例：无限制" placement="right-start" v-show="item.cellName==='贷款类型'?true:false"><i class="el-icon-question"></i></el-tooltip>
             <el-tooltip effect="dark" content="字段示例：0.12" placement="right-start" v-show="item.cellName==='年利率'?true:false"><i class="el-icon-question"></i></el-tooltip>
             <el-tooltip effect="dark" content="字段示例：0.12" placement="right-start" v-show="item.cellName==='罚息利率'?true:false"><i class="el-icon-question"></i></el-tooltip>
             <el-tooltip effect="dark" content="字段示例：0.12" placement="right-start" v-show="item.cellName==='提前还款违约金费率'?true:false"><i class="el-icon-question"></i></el-tooltip>
             <el-tooltip effect="dark" content="字段示例：0.12" placement="right-start" v-show="item.cellName==='分期服务费利率'?true:false"><i class="el-icon-question"></i></el-tooltip>
             <el-tooltip effect="dark" content="字段示例：1970-01-01" placement="right-start" v-show="item.cellName==='贷款期限'?true:false"><i class="el-icon-question"></i></el-tooltip>
             <el-tooltip effect="dark" content="字段示例：0.12" placement="right-start" v-show="item.cellName==='还款期数'?true:false"><i class="el-icon-question"></i></el-tooltip>
          </el-radio>
        </el-radio-group>
      </div>
      <div style="padding-top:10px">
        <div class="circle"></div>
        <span class="circle-title">客户信息</span>
      </div>
      <div class="select">
        <el-radio-group v-model="selectRelate">
          <el-radio class="radio-item" v-for="(item,index) in personalList" :key="index" :label="item" :disabled="!!disStr(item)" v-bind:class="{requiredStr:item.flag===0}">{{item.cellName}}
              <el-tooltip effect="dark" content="字段示例：身份证,驾驶证，毕业证，结婚证，护照等" placement="right-start" v-show="item.cellName==='证件类型'?true:false"><i class="el-icon-question"></i></el-tooltip>
              <el-tooltip effect="dark" content="字段示例：未婚，已婚，离异，丧偶，未知" placement="right-start" v-show="item.cellName==='婚姻状况'?true:false"><i class="el-icon-question"></i></el-tooltip>
              <el-tooltip effect="dark" content="字段示例：高中及以下，专科，本科，硕士，博士，留学生" placement="right-start" v-show="item.cellName==='学历'?true:false"><i class="el-icon-question"></i></el-tooltip>
              <el-tooltip effect="dark" content="字段示例：1970-01-01" placement="right-start" v-show="item.cellName==='证件到期日期'?true:false"><i class="el-icon-question"></i></el-tooltip>
              <el-tooltip effect="dark" content="字段示例：1970-01-01" placement="right-start" v-show="item.cellName==='现居住迁入时间'?true:false"><i class="el-icon-question"></i></el-tooltip>
          </el-radio>
        </el-radio-group>
      </div>
      <div style="padding-top:10px">
        <div class="circle"></div>
        <span class="circle-title">客户联系人信息</span>
      </div>
      <div class="select">
        <el-radio-group v-model="selectRelate">
          <el-radio class="radio-item" v-for="(item,index) in personalContactList" :key="index" :label="item" :disabled="!!disStr(item)" v-bind:class="{requiredStr:item.flag===0}">{{item.cellName}}</el-radio>
        </el-radio-group>
      </div>
      <!-- <div style="padding-top:10px">
        <div class="circle"></div>
        <span class="circle-title">客户工作信息</span>
      </div>
      <div class="select">
        <el-radio-group v-model="selectRelate">
          <el-radio class="radio-item" v-for="(item,index) in personalJobList" :key="index" :label="item" :disabled="!!disStr(item)" v-bind:class="{requiredStr:item.flag===0}">{{item.cellName}}</el-radio>
        </el-radio-group>
      </div> -->
      <div style="padding-top:10px">
        <div class="circle"></div>
        <span class="circle-title">客户收入信息</span>
      </div>
      <div class="select">
        <el-radio-group v-model="selectRelate">
          <el-radio class="radio-item" v-for="(item,index) in personalIncomeList" :key="index" :label="item" :disabled="!!disStr(item)" v-bind:class="{requiredStr:item.flag===0}">{{item.cellName}}
             <el-tooltip effect="dark" content="字段示例：0.12" placement="right-start" v-show="item.cellName==='公积金缴存比例'?true:false"><i class="el-icon-question"></i></el-tooltip>
             <el-tooltip effect="dark" content="字段示例：0.12" placement="right-start" v-show="item.cellName==='缴存基数'?true:false"><i class="el-icon-question"></i></el-tooltip>
             <el-tooltip effect="dark" content="字段示例：0.12" placement="right-start" v-show="item.cellName==='社保缴存比例'?true:false"><i class="el-icon-question"></i></el-tooltip>
          </el-radio>
        </el-radio-group>
      </div>
       <!-- <div style="padding-top:10px">
        <div class="circle"></div>
        <span class="circle-title">客户开户信息</span>
      </div>
      <div class="select">
        <el-radio-group v-model="selectRelate">
          <el-radio class="radio-item" v-for="(item,index) in personalBankList" :key="index" :label="item" :disabled="!!disStr(item)" v-bind:class="{requiredStr:item.flag===0}">{{item.cellName}}</el-radio>
        </el-radio-group>
      </div> -->
      <div style="padding-top:10px">
        <div class="circle"></div>
        <span class="circle-title">客户房产信息</span>
      </div>
      <div class="select">
        <el-radio-group v-model="selectRelate">
          <el-radio class="radio-item" v-for="(item,index) in personalHouseList" :key="index" :label="item" :disabled="!!disStr(item)" v-bind:class="{requiredStr:item.flag===0}">{{item.cellName}}</el-radio>
        </el-radio-group>
      </div>
      <div style="padding-top:10px">
        <div class="circle"></div>
        <span class="circle-title">车辆信息</span>
      </div>
      <div class="select">
        <el-radio-group v-model="selectRelate">
          <el-radio class="radio-item" v-for="(item,index) in carInfoList" :key="index" :label="item" :disabled="!!disStr(item)" v-bind:class="{requiredStr:item.flag===0}">{{item.cellName}}</el-radio>
        </el-radio-group>
      </div>
      <!-- <div style="padding-top:10px">
        <div class="circle"></div>
        <span class="circle-title">产品信息</span>
      </div>
      <div class="select">
        <el-radio-group v-model="selectRelate">
          <el-radio class="radio-item" v-for="(item,index) in productList" :key="index" :label="item" :disabled="!!disStr(item)" v-bind:class="{requiredStr:item.flag===0}">{{item.cellName}}</el-radio>
        </el-radio-group>
      </div>
      <div style="padding-top:10px">
        <div class="circle"></div>
        <span class="circle-title">产品系列信息</span>
      </div>
      <div class="select">
        <el-radio-group v-model="selectRelate">
          <el-radio class="radio-item" v-for="(item,index) in productSeriesList" :key="index" :label="item" :disabled="!!disStr(item)" v-bind:class="{requiredStr:item.flag===0}">{{item.cellName}}</el-radio>
        </el-radio-group>
      </div> -->
    </div>
    <div style="text-align:center">
      <el-button @click="cancel">取消</el-button>
      <el-button @click="saveClick">确定</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { State, Getter, Action, namespace } from 'vuex-class';
import { Dependencies } from '~/core/decorator';
import { Emit, Prop, Watch } from 'vue-property-decorator';
import { ImportExcelConfigService } from '~/services/dataimp-service/import-excel-config.service';

@Component({})
export default class RelationName extends Vue {
  @Prop()
  private rowData: any;
  @Prop()
  private disabledStr: any;
  @Dependencies(ImportExcelConfigService)
  private importExcelConfigService: ImportExcelConfigService;

  private caseInfoList: any[] = [];
  private contractList: any[] = [];
  private personalContactList: any[] = [];
  private personalJobList: any[] = [];
  private personalList: any[] = [];
  private productList: any[] = [];
  private personalBankList:any[]=[];
  private personalHouseList:any[]=[];
  private productSeriesList: any[] = [];
  private personalIncomeList: any[] = [];
  private content:any='';
  private carInfoList:any[]=[];

  private selectRelate: any = {};
  @Emit('close')
  public close() { }
  @Emit('save')
  public save(relate, row, index) { }
  @Watch('rowData', { immediate: true })
  private rowDataChange(value) {
    this.selectRelate = value.row.relationName;
  }
  private disStr(v) {
    return this.disabledStr.find((val) => val === v.cellName);
  }

  private mounted() {
    this.importExcelConfigService.getExcelList().subscribe((data) => {
      this.caseInfoList = data.caseInfoList;
      this.contractList = data.contractList;
      this.personalContactList = data.personalContactList;
      this.personalJobList = data.personalJobList;
      this.personalList = data.personalList;
      this.productSeriesList = data.productSeriesList;
      this.productList = data.productList;
      this.personalBankList=data.personalBankList;
      this.personalHouseList=data.personalHouseList;
      this.carInfoList=data.carInfoList;
      this.personalIncomeList = data.personalIncomeList;
    });
  }
  private cancel() {
    this.selectRelate = '';
    this.close();
  }
  private saveClick() {
    this.save(this.selectRelate, this.rowData.row, this.rowData.$index);
    this.selectRelate = '';
    this.close();
  }
}
</script>

<style scoped lang="less">
.model {
  margin-bottom: 20px;
  overflow: auto;
}

.radio-item {
  width: 20%;
}

.select {
  border: 1px solid #eff2f7;
  margin-top: 10px;
  max-height: 650px;
  padding: 10px;
  text-align: left;

}

.requiredStr {
  color: red;
}

.circle {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 15px;
  margin-right: 5px;
  background-color: #28313e;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  vertical-align: middle;
}

.circle-title {
  font-size: 14px;
  line-height: 13px;
  color: #28313e;
}
</style>
